<template>
    <div>
        <!-- 头条精选 -->
        <div class="goodselect">
            <!-- 标题 -->
            <div class="goodselect_title">
                <div class="goodselect_title_1">头条精选</div>
                <div class="goodselect_title_2"><span>
                        更多
                    </span>
                    <img src="../../assets/images/more.png" alt=""></div>
            </div>
            <div style="clear: both;"></div>
            <!-- 内容 -->
            <div class="goodselect_content">
                <ul class="goodselect_content_top">
                    <li class="goodselect_content_top_one">
                        <img src="https://online-course.nos-eastchina1.126.net/天亮官网文章图-1273591449425805312.png" alt="">
                        <div>天亮教育2020暑期班火热招生中</div>
                    </li>
                    <li class="goodselect_content_top_two">
                        <img src="https://online-course.nos-eastchina1.126.net/经验分享_拷贝-1250274708364984320.jpg" alt="">
                        <div>小米集团-科大16级韩同学成长经历...</div>

                    </li>
                    <li class="goodselect_content_top_three">
                        <img src="https://online-course.nos-eastchina1.126.net/经验分享_拷贝-1250274708364984320.jpg" alt="">
                        <div>米联科技-科大16级郭同学成长经历...</div>

                    </li>
                    <li class="goodselect_content_top_four">
                        <img src="https://online-course.nos-eastchina1.126.net/经验分享_拷贝-1250274708364984320.jpg" alt="">
                        <div>万象思维-科大16级支同学成长经历...</div>

                    </li>
                    <li class="goodselect_content_top_five">
                        <img src="https://online-course.nos-eastchina1.126.net/经验分享_拷贝-1250274708364984320.jpg" alt="">
                        <div>尚云科技-科大15级王同学成长经历...</div>

                    </li>
                </ul>
            </div>
        </div>
        <!-- 清除浮动 -->
        <div style="clear: both;"></div>
    </div>
</template>

<script>
    export default {
        name: "HeadlineSelection"
    }
</script>

<style scoped>
    /* 头条精选 */
    .goodselect{width: 90%;
        margin: 0 auto;
        margin-top: 50px;
        margin-bottom: 90px;
        overflow: hidden;
    }
    /* 标题 */
    .goodselect_title{position: relative;
        border-bottom: 1px solid #cccccc;
        padding-bottom: 15px;
    }
    .goodselect_title_1{    text-align: center;
        font-size: 26px;
    }
    .goodselect_title_2{position: absolute;
        font-size: 12px;
        top: 10px;
        right: 0px;
        color: #cccccc;
    }
    .goodselect_title_2>img{
        width: 30%;
    }
    /* 内容 */
    .goodselect_content{width: 98%;
        font-size: 12px;
        margin: 0 auto;
        margin-top: 15px;
    }
    /* 内容第一行 */

    .goodselect_content_top>li{float: left;
        width: 18.8%;
        margin-left: 1%;
        cursor: pointer;
    }
    .goodselect_content_top>li:hover{
        color: #00cf8c;
    }
    .goodselect_content_top>li:nth-of-type(1){
        margin-left: 0px;

    }
    .goodselect_content_top>li>img{width: 100%;
    }
    .goodselect_content_top>li>div{
        margin-top: 10px;
    }
    .goodselect_content_top>li>div:nth-of-type(2){
        color: #888888;
    }
    .goodselect_content_top>li>div:nth-of-type(3){
        color: #00cf8c;
    }
</style>